<template>
  <el-dialog title="申请详情"
             :close-on-click-modal="false"
             :visible.sync="dialogShow"
             width="640px"
             :before-close="handleClose">
    <el-form :model="dialogForm"
             ref="dialogForm"
             style="position: relative;"
             label-width="100px">
      <p v-if="dialogDetail.approveStatus === 3"
         :class="'g-status-'+dialogDetail.approveStatus"
         class="errSta staItem">驳回</p>
      <p v-if="dialogDetail.approveStatus === 2"
         :class="'g-status-'+dialogDetail.approveStatus"
         class="successSta staItem">审批通过</p>
      <el-form-item label="学生信息：">
        <div>{{dialogDetail.studentName}}（{{dialogDetail.studentSn}}）{{$transSexUnknow(dialogDetail.gender)}} {{dialogDetail.studentType}}</div>
        <div>{{dialogDetail.collegeName}}>{{dialogDetail.majorName}}>{{dialogDetail.gradeName}}级>{{dialogDetail.className}}</div>
      </el-form-item>
      <el-form-item label="当前入住："
                    v-if="type_ !== 1">
        <div>{{dialogDetail.beforBedInfo || '--'}}</div>
      </el-form-item>
      <el-form-item label="分配入住："
                    v-if="(type_ === 1 || type_ === 3) && dialogDetail.filing === 1">
        <div>{{dialogDetail.afterBedInfo}}</div>
      </el-form-item>
      <el-form-item label="申请理由：">
        <div>{{dialogDetail.applyReason}}</div>
      </el-form-item>
      <el-form-item label="相关材料：">
        <el-row>
          <el-col :span="8"
                  @click.native="showBigImg(`${$fileServer.download}?filePath=${item.filePath}`)"
                  v-for="(item, index) in JSON.parse(dialogDetail.images)"
                  :key="index">
            <el-card>
              <img :src="`${$fileServer.download}?filePath=${item.filePath}`"
                   class="image">
            </el-card>
          </el-col>
        </el-row>
      </el-form-item>
      <step :edit="false"
            v-if="!filingShow"
            :stepData="stepData"></step>
      <el-form-item label="备案号："
                    v-if="dialogDetail.filingNumber || filingShow">
        <span>{{dialogDetail.filingNumber || filingNumber}}</span>
      </el-form-item>
      <el-form-item label="审核意见："
                    v-if="dialogDetail.approveStatus === 1 && lastAgreeRole !== userRole"
                    prop="apinion">
        <el-input v-model="dialogForm.apinion"
                  placeholder="请输入审核意见（最多200字）"
                  :maxlength="200"
                  type="textarea"
                  :rows="2"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer"
          class="dialog-footer">
      <el-button @click="handleClose"
                 v-if="dialogDetail.approveStatus === 1 && lastAgreeRole !== userRole && !isFiling"
                 size="small">取 消</el-button>
      <el-button type="danger"
                 @click="sure(3)"
                 v-if="dialogDetail.approveStatus === 1 && lastAgreeRole !== userRole"
                 size="small">驳 回</el-button>
      <el-button type="primary"
                 v-if="dialogDetail.approveStatus === 1 && lastAgreeRole !== userRole"
                 @click="sure(2)"
                 size="small">同 意</el-button>
      <!-- <el-button type="primary"
                 v-if="dialogDetail.approveStatus === 2 && type_ === 4 && filingShow"
                 @click="sure(4)"
                 size="small">确定备案</el-button> -->
    </span>
    <el-dialog :visible.sync="bigImgShow"
               :modal="false">
      <img width="100%"
           :src="dialogImageUrl"
           alt="">
    </el-dialog>
  </el-dialog>
</template>
<script>
import { commitApproval } from '@api/systemManage'

export default {
  props: {
    dialogShow: Boolean,
    dialogDetail: Object,
    type_: Number,
    stepData: Array,
    query: Function,
    lastAgreeRole: String,
    filingShow: Boolean,
    isFiling: Boolean,
    filingNumber: String
  },
  data () {
    return {
      dialogForm: {
        apinion: ''
      },
      bigImgShow: false,
      dialogImageUrl: ''
      // rules: {
      //   apinion: [
      //     { required: true, message: '请输入审核意见' }
      //   ]
      // }
    }
  },
  computed: {
    userRole () {
      return JSON.parse(sessionStorage.userInfo).roleName
    }
  },
  methods: {
    handleClose () {
      if (this.dialogDetail.approveStatus === 1 && this.lastAgreeRole !== this.userRole) {
        this.$nextTick(() => {
          this.$refs.dialogForm.resetFields()
        })
      }
      this.$emit('handleClose')
    },
    showBigImg (url) {
      this.dialogImageUrl = url
      this.bigImgShow = true
    },
    sure (num) {
      // this.$refs.dialogForm.validate(valid => {
      //   if (valid) {
      if (num === 3) {
        if (this.dialogForm.apinion.length) {
          commitApproval(this.dialogDetail.id, {
            apinion: this.dialogForm.apinion,
            applyId: this.dialogDetail.id,
            status: num
          }).then(res => {
            this.$message.success('操作成功')
            this.handleClose()
            this.query()
          })
        } else {
          this.$message.error('请输入审核意见')
        }
      } else {
        commitApproval(this.dialogDetail.id, {
          apinion: this.dialogForm.apinion,
          applyId: this.dialogDetail.id,
          status: num
        }).then(res => {
          this.$message.success('操作成功')
          this.handleClose()
          this.query()
        })
      }
      //   }
      // })
    }

  }
}
</script>
<style lang="less" scoped>
.image {
  width: 100%;
  display: block;
}
.staItem {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  line-height: 80px;
  text-align: center;
  transform: rotate(-60deg);
  right: 50px;
}
.errSta {
  border: 2px solid red;
}
.successSta {
  border: 2px solid #1c901a;
}
</style>
<style lang="less">
.el-card__body {
  padding: 10px !important;
  height: 200px;
  cursor: pointer;
}
</style>
